<template>
  <div>只有一个二级路由</div>
  <div v-for="i in imgArr" :key="i">
    <img v-lazy="i" alt="" />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from 'vue'
import type { Directive } from 'vue'
let timer: number
const imgObj: Record<string, { default: string }> = import.meta.glob(
  '@/assets/images/**/*.*',
  { eager: true },
)
let imgArr = Object.values(imgObj).map((v) => v.default)
// 图片懒加载
let vLazy: Directive<HTMLImageElement, string> = async (el, binding) => {
  let url = await import('@/assets/images/logo.jpg')
  el.src = url.default
  const observer = new IntersectionObserver((env) => {
    if (env[0].intersectionRatio > 0) {
      timer = setTimeout(() => {
        el.src = binding.value
      }, 500)
      observer.unobserve(el)
    }
  })
  observer.observe(el)
}
onBeforeUnmount(() => {
  clearTimeout(timer)
})
</script>

<style lang="scss" scoped>
img {
  height: 300px;
  width: 200px;
}
</style>
